<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>文章归档</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/cl-css.css" rel="stylesheet">
    <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/highlight/styles/railscasts.css">
    <link rel="stylesheet" href="/css/common.css">
</head>
<body>
<!--导航栏-->
<div th:replace="component/componet-navbar::componet-navbar (${2})"></div>
<!--内容-->
<div class="cl-cantainer container" style="margin-top:20px">
    <!--  总览-->
    <div class="row">
        <div class="col" style="border-left: 2px solid deepskyblue;background: white">
            <span style="line-height:50px">归档</span>
            <span style="float: right;line-height: 50px">
      <span>共</span>
      <span style="color: orange;font-weight: bolder;font-size:x-large" th:text="${totalSize}">14</span>
      <span>篇文章</span>
    </span>
        </div>
    </div>
    <!--  具体内容-->
    <div>
        <div th:each="item :${archiveList}">
            <!--    年份-->
            <div class="row" style="margin-top: 20px" th:text="${item.get(0).getYear()}">
                2019
            </div>
            <!--    本年下所有内容-->
            <section class="row" style="margin-top: 20px" th:each="subItem : ${item}">
                <div class="col" style="border-left: 2px solid deepskyblue;background: white">
        <span style="line-height:50px">
         <a th:href="@{/article/{id} (id=${subItem.articleId})}"><span th:text="${subItem.articleTitle}">标题1</span></a>
          <span class="badge badge-info" th:text="${subItem.year+'.'+subItem.month}">2019.6</span>
        </span>
                </div>
            </section>
        </div>
    </div>
</div>
<!--页脚-->
<div th:replace="component/component-footer::component-footer"></div>

<script src="/jquery/jquery.min.js"></script>
<script src="/js/bootstrap.bundle.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/highlight/highlight.pack.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>
<script src="/js/common.js"></script>
</body>
</html>